<template>
    <div id="dashboard">
        <vHeadSpace />
        <div class="outcontainer">
            <vAsideSpace />
            <div  class="content" style="padding:30px;">
                <div><img :src='imgUrl'></div>
                <span>当前监控设备: 一共监控了{{all_hosts}}台设备</span>
                <el-table
                        v-loading="isLoading"
                        :data="details_of_hosts_currentPage"
                        style="width: 100%"
                        @filter-change="filterHandler">
                    <el-table-column
                            prop="hostname"
                            label="名称"
                            width="200px">
                    </el-table-column>
                    <el-table-column
                            prop="ip"
                            label="接口"
                            width="250px">
                    </el-table-column>
                    <el-table-column
                            label="可用性"
                            width="200">
                        <template slot-scope="scope">
                            <div class="itemInfo-middle-type">
                                <div :style="{background:scope.row.avail === 'ZBX' ? 'green' : scope.row.avail === 'ZBX不可用' ? 'red' : ''}" class="itemInfo-middle-type-first">ZBX</div>
                                <div :style="{background:scope.row.avail === 'SNMP' ? 'green' : scope.row.avail === 'SNMP不可用' ? 'red' : ''}">SNMP</div>
                                <div :style="{background:scope.row.avail === 'JMX' ? 'green' : scope.row.avail === 'JMX不可用' ? 'red' : ''}">JMX</div>
                                <div :style="{background:scope.row.avail === 'IPMI' ? 'green' : scope.row.avail === 'IPMI不可用' ? 'red' : ''}" class="itemInfo-middle-type-last">IPMI</div>
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column
                            label="状态"
                            prop="status"
                            column-key="status"
                            :filters="[{value: '已启用', text: '已启用'},{value: '已禁用', text: '已禁用'}]">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.status === '已启用' ? 'success' : 'danger' "
                            >{{scope.row.status}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        :current-page="currentPage"
                        :page-sizes="[5, 8, 10]"
                        :page-size="a_pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="all_hosts"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                </el-pagination>
                <el-row class="block-col-2">
                    <el-col :span="12">
                        <div style="padding:30px;">
                            <!--  高负载设备列表页头部栏  -->
                            <div class="itemInfo-header">
                                <p>高负载设备列表</p>
                            </div>
                            <!--  高负载设备列表内容   -->
                            <el-table
                                    v-loading="isLoading"
                                    :data="details_of_hosts"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        prop="number"
                                        label="序号"
                                        align="center"
                                        width="50">
                                    <template slot-scope="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="hostname"
                                        label="主机名称"
                                        align="center"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="hostinterface"
                                        label="接口"
                                        align="center"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="CPU utilization"
                                        label="CPU利用率"
                                        sortable
                                        align="center"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="Memory utilization"
                                        label="内存利用率"
                                        align="center"
                                        width="120"
                                        sortable>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-left: 25px;margin-right: 25px;margin-top: 25px">
                            <!--  主机下拉框-->
                            <h4>未处理告警信息</h4>
                            <el-table
                                    v-loading="pictLoading"
                                    :data="tableData"
                                    tooltip-effect="dark"
                                    style="width: 100%"
                                    element-loading-text="数据正在加载中"
                            >
                                <el-table-column min-width="30px" align="center" prop="sequence" label="序号">
                                    <template slot-scope="scope">
                                        {{ (currentPage - 1) * pageNum + scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <!--      <el-table-column prop="clock" label="告警时间" width="180px" align="center"></el-table-column>-->
                                <!--                        <el-table-column prop="host" label="设备名称" width="180px" align="center"></el-table-column>-->
                                <el-table-column prop="priority" label="严重性" width="180px" align="center" ></el-table-column>
                                <el-table-column prop="lastchange" label="时间" width="180px" align="center"></el-table-column>
                                <el-table-column prop="description" label="告警内容"  align="center"></el-table-column>
                            </el-table>
                            <!--分页控件-->
                            <el-pagination
                                    :current-page="currentPage"
                                    :page-sizes="[10,20,30,40]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="totalNum"
                                    @size-change="handleSizeChange1"
                                    @current-change="handleCurrentChange1"
                            />
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <vFootSpace />

    </div>



</template>

<script>
    import axios from 'axios'
    export default {
        name: "DashBoardDuplicated",
        provide() {
            return {
                reloadAll: this.reloadAll,
            }
        },
        data() {
            return {
                details_of_hosts_currentPage: [], // 当前页数据
                a_pageSize: 10, // 控制当前页显示数据的数量
                currentPage: 1, // 当前页
                direction: 'ttb',
                current_host_id: '',
                dialogVisible: false, // 显示监控项dialog
                interface_dialogVisible: false, // 显示SNMP接口选择图dialog
                tagType: 'success',
                monitorData: [],
                isRouterAlive: true,
                status: '',
                monitorLoading: false,
                host: "",
                selectedItemIds: [],
                itemList: [],
                hostSate: {},
                avail:'',
                pageShow: true,
                name_of_current_host: '', // 具体监控项中显示主机的名字
                id_of_current_host: 0, // 方便页面跳转传值
                interfaces_of_snmp: [], // 可供用户选择的接口
                interfaces_selected: '',
                imgUrl:require("../../public/guide.png"),
                tabPosition: 'CPU utilization',
                timer: null,
                all_hosts: 0, // 监控主机数
                isLoading: false,
                options: [{
                    value: 'CPU utilization',
                    label: 'CPU utilization'
                }, {
                    value: 'Memory utilization',
                    label: 'Memory utilization'
                },{
                    pagination: true,
                    pageSize: 7,
                    pageList: [5, 10, 20]
                }
                ],
                online_host_list: [],
                hostId: '',    //主机名称
                checkList: [], // 严重性选择
                tableData: [], // 表格内部的数据
                pictLoading: false,  //加载项
                pageNum: 10, // 每页展示多少数据
                totalNum: 0, // 数据总条数
            }
        },

        mounted() {
            this.isLoading = true;
            this.handleSubmit1();
            this.getHostList();
            this.created1();
        },


        /**
         * 生命周期函数获取监控设备的信息
         */
        created() {
            console.log(this.currentPage);
            axios({
                method: 'post',
                url: '/monitor/get_host_list.action',
                data: {
                    pageNo: this.currentPage,
                    pageSize: this.a_pageSize,
                    status: this.status
                }
            }).then( (res) => {
                this.all_hosts = res.data.content.count;
                this.details_of_hosts_currentPage = res.data.content.result;
                this.isLoading = false;
            })
        },

        methods: {
            /*
            * 处理各种页面跳转
            *
            * */
            pageJump(url, data) {
                this.$router.push({path: url, query: data })
            },

            reloadAll() {
                this.isRouterAlive = false;
                this.$nextTick(() => {
                    this.isRouterAlive = true
                })
            },

            /**
             * 表格过滤
             * @returns {boolean}
             * @param filters
             */
            filterHandler (filters){

                this.isLoading = true;
                if (!Boolean(filters.status[0])){
                    this.status = '';
                }else {
                    this.status = filters.status[0];
                }


                axios({
                    method: 'post',
                    url: '/monitor/get_host_list.action',
                    data: {
                        pageNo: this.currentPage,
                        pageSize: this.a_pageSize,
                        status: this.status
                    }
                }).then( (res) => {

                    console.log(res.data.content.result);
                    this.all_hosts = res.data.content.count;
                    this.details_of_hosts_currentPage = res.data.content.result;
                    this.isLoading = false;
                })
            },

            /**
             * 更改每页显示页数
             * @param val
             */
            handleSizeChange(val) {
                this.a_pageSize = val;
                this.handleSubmit();
            },

            /**
             * 点击上一页下一页的时候重新发请求获取当前页数据
             * @param val
             */
            handleCurrentChange(val) {
                this.currentPage = val;
                this.isLoading = true;
                this.handleSubmit();
            },
            /*
            * 请求当前页数据
            * */
            handleSubmit() {
                axios.post('/monitor/get_host_list.action', {
                    pageNo: this.currentPage,
                    pageSize: this.a_pageSize,
                    status: this.status
                }).then((res) => {
                    console.log(res.data.content.result);
                    this.all_hosts = res.data.content.count;
                    this.details_of_hosts_currentPage = res.data.content.result;
                    console.log(this.details_of_hosts_currentPage.length);
                    this.isLoading = false;
                })
            },
            getValue(val) {
                clearInterval(this.timer)
                this.timer = setInterval( () =>{
                    this.getHighHostList(val)
                }, 30000)
                // this.getHighHostList(val)
            },
            getHighHostList(val) {
                this.name = val;
                console.log('你选择了', val)
                axios({
                    method: 'post',
                    url: '/monitor/get_high_load_host_list.action',
                    data: {
                        name: this.name
                    }
                }).then((res) => {
                    this.details_of_hosts = res.data.content.result;
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 0) {
                    return 'most-row';
                } else if (rowIndex === 1) {
                    return 'more-row';
                } else if (rowIndex === 2){
                    return 'ordinary-row';
                }
                return '';
            },
            sizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
            },
            currentChange: function (currentPage) {
                this.currentPage = currentPage
            },
            handleSubmit1() {
                const _this = this
                axios({
                    methods: 'get',
                    url: '/problem/get_current_unhandled_problem.action',
                    params: {
                        hostId: _this.hostId, // hostId
                        checkList: _this.checkList.toString(), // severity
                        currentPage: _this.currentPage,
                        pageSize: _this.pageNum
                    }
                }).then((res) => {
                    console.log("res:  "+res.data.content.result);
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = []
                    } else {
                        _this.tableData = res.data.content.result
                        _this.totalNum = res.data.content.data_num
                    }
                })
            },
            handleSizeChange1(val) {
                this.pageNum = val;
                this.handleSubmit1();
            },
            handleCurrentChange1(val) {
                this.currentPage = val;
                this.handleSubmit1();
            },
            getHostList() { // 获取主机列表
                let _this = this;
                axios({
                    method: 'get',
                    url: '/demo/get_all_online_host.action'
                }).then(function (response) {
                    let resultList = response.data.content.result
                    _this.online_host_list = resultList;
                }).catch(function (error) {
                    console.log(error)
                })
            },
            created1() {
                console.log(this.currentPage);
                axios({
                    method: 'post',
                    url: '/monitor/get_high_load_host_list.action',
                    data: {
                        name : 'CPU utilization',
                        pageNo: this.currentPage,
                        pageSize: this.a_pageSize
                    }
                }).then( (res) => {
                    console.log(res.data.content.result);
                    this.details_of_hosts = res.data.content.result;
                    this.all_hosts = res.data.content.count;
                    console.log(this.details_of_hosts.length);
                    this.isLoading = false;
                    this.getValue("CPU utilization")
                })
            },
            destroyed() {
                clearInterval(this.timer)
            }
        }
    }
</script>
<style scoped>
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .itemInfo-middle-type{
        display: inline;
    //margin-left: 20px;
        line-height: 50px;
    }
    .itemInfo-middle-type div{
        display: inline;
        padding-left: 3px;
        padding-right: 3px;
        height: 30px;
        line-height: 30px;
        color: #d9d9d9;
        border-top: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .itemInfo-middle-type-first{
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
    }
    .itemInfo-middle-type-last{
        border-right: 1px solid #d9d9d9;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .itemInfo-header{
        height: 56px;
        line-height: 56px;
        vertical-align: center;
    }
    .itemInfo-header p{
        float: left;
        font-size: 30px;
    }
    .itemInfo-middle{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        float: right;
    }
    el-dialog {
        max-height: 500px;
        overflow: auto;
    }
    .content{
        margin-top: 80px;
        width: 100%;
        height: 550px;
        overflow-x:hidden
    }
</style>
